<template>
    <div class="score">
        <div class="score-header">
            <span>测试结果</span>
        </div>
        <div class="score-container">
            <div class="totalScore">得分：{{ state.totalScore }}分</div>
            <span>{{desc[state.totalScore]}}</span>
        </div>
        <div class="score-again">
            <i class="iconfont icon-zailaiyici"></i>
            <button class="btn" @click="again">再来一次</button>
        </div>
    </div>
</template>

<script setup>
// 获取仓库中的问题数据
// 获取仓库中的答案，去计算得分
import { storeToRefs } from 'pinia';
import useQuestionStore from '../store/question.js';
import {useRouter}from 'vue-router'

const router = useRouter();

const questionStore = useQuestionStore();
const { state } = storeToRefs(questionStore);

questionStore.calculateTotalScore();

const again=()=>{
    router.push('./home')
    questionStore.clear()
}

const desc={
    0:'怎么一道题都没做对啊，重新来过吧',
    20:'只做对了1道，加油吧',
    40:'做对两道了，继续努力！',
    60:'做对一半以上了，你真棒！',
    80:'竟然做对了四道，简直是天才！',
    100:'竟然全做对了，膜拜大佬！'
}

</script>

<style lang="less" scoped>
.score {
    background-color: #F9FAFB;
    min-height: 100vh;

    .score-header {
        background-color: #fff;
        height: 5.2rem;
        display: flex;
        align-items: center;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

        span {
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 16px;
            color: #000000;
            margin-left: 1.4rem;
        }
    }

    .score-container {
        text-align: center;

        .totalScore {
            margin: 3.4rem 1.2rem 0 1.2rem;
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 2.6rem;
            color: #000000;
            margin-bottom: 0.7rem;
        }

        span {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 1.2rem;
            color: #6B7280;
        }
    }

    .score-again {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 4.4rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .icon-zailaiyici {
        font-size: 1.2rem;
    }

    .btn {
        border: none;
        background-color: #fff;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 1.4rem;
        color: #374151;
    }
}
</style>